<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>分组管理</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
    <style>
        .table-condensed th, .table-condensed td{
            padding-bottom:0px;
            padding-top: 1px;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            reloadData();
            // 添加按钮
            $("#btnSubmit").click(function () {
                $.post("${ctx}/customer/potentialAdminGroup/save", 
                		$("#searchForm").serialize(),
                      	function (data) {
                            $("#searchForm").find("input").not(".btn").val("");
                          	if (data.state == true) {
                              	alertx(data.message,function(){
                                    window.location.reload();
                                });
                          	} else {
                        	  	alertx(data.message,null,null,null,"error");
                          	}
                      	});
            });
            $(".delBtn").click(function(){
            	del($(this).data("id"));
            });
        });
        
        // 重新加载data
        function reloadData() {
            //$("#treeTableList").empty();
            $("#treeTableList").html("");
            $.get("${ctx}/customer/potentialAdminGroup/listAjaxData", function (data) {
                _buildTreeTable(data);
            });
        }

        function _buildTreeTable(data) {
            var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
            var ids = new Array(), rootIds = new Array();
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].id);
            }
            ids = ',' + ids.join(',') + ',';
            for (var i = 0; i < data.length; i++) {
                if (isEdit(data[i].name)) {
                    data[i].display = 'none';
                }else{
                    data[i].display = 'block';
                }
                if (ids.indexOf(',' + data[i].parentId + ',') == -1) {
                    if ((',' + rootIds.join(',') + ',').indexOf(',' + data[i].parentId + ',') == -1) {
                        rootIds.push(data[i].parentId);
                    }
                }
            }
            for (var i = 0; i < rootIds.length; i++) {
                _addRow("#treeTableList", tpl, data, rootIds[i], true);
            }
            $("#treeTable").treeTable({expandLevel: 3, initialState: "expanded"});

        }
        
        function _addRow(list, tpl, data, pid, root) {
            for (var i = 0; i < data.length; i++) {
                var row = data[i];
                if ((${fns:jsGetVal('row.parentId')}) == pid) {
                    $(list).append(Mustache.render(tpl, {
                        dict: {
                            blank123: 0
                        }, pid: (root ? 0 : pid), row: row
                    }));
                    _addRow(list, tpl, data, row.id);
                }
            }
        }
        
        function isEdit(_value){
        	var rs = false;
			$(".hide-data input").each(function(){
				if (this.value == _value ) 
					rs = true;
            });
			return rs;
        }
        
        //删除分组
        function del(id){
        	confirmx("确认要删除该分组吗？", function () {
                $.post("${ctx}/customer/potentialCustomer/deleteAdminGroup",
                        {id: id}, 
                        function (data) {
                            if (data.state == true) {
                            	alertx(data.message,function(){
                                    window.location.reload();
                                    });
                            } else {
                            	alertx(data.message,null,null,null,"error");
                            }
                        });
            });
        	return false;
        }
        //显示或隐藏编辑区域
        function editArea(_this){
        	$(_this).parents("tr").find(".viewCell").toggle() ;
            $(_this).parents("tr").find(".editCell").toggle() ;
        }
		//更新分组名称
        function update(_this) {
        	var inputTag = $(_this).parents("tr").find("input[type='text']");
            var _id = $(inputTag).data("id");
            var _name = $(inputTag).val();
            if ($(inputTag).val() == "") {
            	alertx("分组名称不能为空",null,null,null,"error");
            	return;
            } else {
                $.post("${ctx}/customer/potentialAdminGroup/update",
                        {
                            id: _id,
                            name: _name
                        }, function (data) {
                            if (data.state == true) {
                            	alertx(data.message);
                            } else {
                            	alertx(data.message,null,null,null,"error");
                            }
                            window.location.reload();
                        });
            }
        }
        
        function selectGroup(){
        	return $(".checkboxselectone[checked='checked']").val();	
        }
        
    </script>
</head>
<body>
<%--添加div start--%>
<div id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion2">
                <i class="icon-plus"></i>添加分组
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <form id="searchForm" action="" onsubmit="return false" method="post" class="form-search" style="margin: 0px;padding: 10px;">
                <ul class="ul-form">
                    <li><label>上级分组：</label>
                    <sys:treeselect id="parent" name="parent.id" value="${potentialAdminGroup.parent.id}" labelName="parent.name" labelValue="${potentialAdminGroup.parent.name}"
					title="父级分组" url="/customer/potentialAdminGroup/treeData" extId="${potentialAdminGroup.id}" cssClass="input-small" allowClear="true"/>
                    </li>
                    <li><label><span style="color: red">*</span>分组名称：</label>
                        <input id="name" name="name" type="text" maxlength="50" class="input-small required"/>
                    </li>
                    <li class="btns"><input id="btnSubmit" class="btn btn-primary btn-small" type="button" value="添加"/></li>
                    <li class="btns"></li>
                    <li class="clearfix"></li>
                </ul>
            </form>
            <div style="padding-left:35px; padding-bottom:10px; color: #6495ED;">
	            <span >提示：如果不选择上级分组，则添加的分组为顶级分组</span>
            </div>
        </div>
    </div>
</div>
<%--添加div end--%>
<div class="hide hide-data">
	<c:forEach items="${fns:getDictList('POTENTIAL_GROUP')}" var="pg" >
		<input type="hidden" value="${pg }" />
	</c:forEach>
</div>
<table id="treeTable" class="table table-striped table-bordered table-condensed table-hover checkboxcontainer">
    <thead>
    <tr>
        <th>分组名称</th>
        <shiro:hasPermission name="customer:potentialAdminGroup:edit">
            <th style="width: 60px;text-align: center">操作</th>
        </shiro:hasPermission>
    </tr>
    </thead>
    <tbody id="treeTableList"></tbody>
</table>
<script type="text/template" id="treeTableTpl">
    <tr id="{{row.id}}" pId="{{pid}}">
        <td>
            <span class="viewCell">
                <input name="selectId" class="checkboxselectone" value="{{row.id}}" type="checkbox"/>
                <span>{{row.name}}</span>
            </span>
            <span class="editCell" style="display:none;">
                <input type="text" value="{{row.name}}" data-id="{{row.id}}" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" style="margin-bottom:0px;" />
 				<a href="javascript:void(0)" class="btn btn-small" onclick="update(this);">确定</a>
 				<a href="javascript:void(0)" class="btn btn-small" onclick="editArea(this);">取消</a>
			</span>
        </td>
        <shiro:hasPermission name="customer:potentialAdminGroup:edit">
            <td>
				<div style="display:{{row.display}}">
					<a href="javascript:void(0)" onclick="editArea(this);">修改</a>
                	<a href="javascript:void(0);" onclick="del('{{row.id}}');" >删除</a>
				</div>
            </td>
        </shiro:hasPermission>
    </tr>
</script>
</body>
</html>